<template>
  <div id="messageList">
    <div class="tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="企业公告" name="second"></el-tab-pane>
        <el-tab-pane label="系统公告" name="first"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="timelineContent" v-if="!isicon && activeName === 'first'">
      <div class="timelineYearItem" v-for="(activityItem, index) in activities" :key="index">
        <h1>{{ activityItem[0].cDate.substring(0, 4) }}</h1>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activityItem" :key="index" :color="activity.color" size="normal">
            <el-card>
              <div class="cardHead">
                <!-- <span class="redPonter"></span> -->
                <span class="cardHeadText">{{ activity.cNoticeType == "1" ? "系统公告" : "系统更新" }}</span>
              </div>
              <p class="cardMain">
                {{ activity.cTitle }}
                <span class="pull-right" @click="viewMsgDetails(activity, 1)">了解详情 <i class="el-icon-arrow-right"></i></span>
              </p>
              <div class="timeStamp">
                <p>{{ activity.cDate.substring(5, 10) }}</p>
                <p>{{ activity.cDate.substring(11, 16) }}</p>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!--2020-1-19 | gz | 添加无消息显示的图片 -->
    <div class="timelineContent" v-if="!isicon1 && activeName === 'second'">
      <div class="timelineYearItem" v-for="(value, key) in noticeList" :key="key">
        <h1>{{ key }}</h1>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in value" :key="index" :color="activity.color" size="normal">
            <el-card>
              <div class="cardHead">
                <!-- <span class="redPonter"></span> -->
                <span class="cardHeadText">{{ "企业公告" }}</span>
              </div>
              <p class="cardMain">
                {{ activity.title }}
                <span class="pull-right" @click="viewMsgDetails(activity, 2)">了解详情 <i class="el-icon-arrow-right"></i></span>
              </p>
              <div class="timeStamp">
                <p>{{ activity.publishtime.substring(5, 10) }}</p>
                <p>{{ activity.publishtime.substring(11, 16) }}</p>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div v-if="isicon  && activeName === 'first'" class="iconCount">
      <img src="@/assets/images/available.png" />
    </div>
    <div v-if="isicon1  && activeName === 'second'" class="iconCount">
      <img src="@/assets/images/available.png" />
    </div>
  </div>
</template>
<script>
export default {
  name: "messageList",
  data() {
    return {
      // 系统公告
      activities: [],
      isicon: false,
      isicon1: false,
      activeName: "second",
      // 企业公告
      noticeList: {},
    };
  },
  methods: {
    getMessageList() {
      this.$api.messages.NotificationGetList().then((res) => {
        let resData = res.data.data;
        if (resData == null || !resData) {
          this.isicon = true;
          return false;
        }
        // 赋值列表已读未读颜色 灰色已读
        resData.map((item) => {
          item.readCount == 0 ? item.color = "#F17F60" : item.color = "#E4E7ED";
        });
        // 处理数据
        let arr = [];
        let arrItem = [];
        let activities = resData;
        let activitiesLen = activities.length;
        let mapNum = 0;
        let thisYear = "";
        activities.map((item, key) => {
          let itemYear = item.cDate.substring(0, 4);
          if (mapNum === 0) {
            thisYear = itemYear;
          }
          if (thisYear !== itemYear) {
            thisYear = itemYear;
            if (mapNum !== 0) {
              arr.push(arrItem);
              arrItem = [];
            }
          }
          arrItem.push(item);
          if (key + 1 === activitiesLen) {
            arr.push(arrItem);
            arrItem = [];
          }
          mapNum++;
        });
        this.activities = arr;
      });
    },
    viewMsgDetails(activity, type) {
      // type  1系统公告   2企业公告
      if (type === 1) {
        Object.assign(activity, { type });
        sessionStorage.setItem("itemDetails", JSON.stringify(activity));
        this.$router.push({ name: "messageDetails", params: { type } });
      } else {
        this.$router.push({
          path: "/AnnouncementManagement",
          query: {
            id: Number(activity.id),
          },
        });
      }
    },
    // 企业公告
    getNotices() {
      //  this.$loading()
      this.$api.enterprisePortal.GetRoleSubCompany().then((res) => {
        // 所有子公司id
        if (!res.data.data) {
          this.isicon = true;
          return;
        }
        let subidArr = [];
        res.data.data.map((item) => {
          subidArr.push(item.subid);
        });
        this.$api.enterprisePortal.GetNotices({ subid: subidArr }).then((res) => {
          if (!res.data.data) {
            return;
          }
          let resData = res.data.data.map((item) => item.notice);
          resData.map((item, index) => {
            if (res.data.data[index].status == 0 || res.data.data[index].status == 1) {
              item.color = "#F17F60";
            } else {
              item.color = "#E4E7ED";
            }
          });
          // let noticeList = []
          let yearObj = {};
          resData.map((item) => {
            let year = item.publishtime?.split("-")[0];
            if (year in yearObj) {
              yearObj[year].push(item);
            } else {
              yearObj[year] = [item];
            }
          });

          this.noticeList = yearObj;
          // this.$loading().close()
        });
      });
    },
  },
  activated() {
    this.getMessageList();
    this.getNotices(); // 注释企业公告
  },
};
</script>
<style lang="less">
#messageList {
  padding: 50px 135px;
  .tabs {
    position: relative;
    left: -45px;
    bottom: 20px;
    width: calc(100% + 72px);
  }
  h1 {
    font-size: 20px;
    position: relative;
    left: -103px;
  }
  .el-timeline {
    padding-top: 45px;
  }
  .timelineContent {
    .el-card.is-always-shadow {
      box-shadow: 0px 0px 20px #d4dcf0;
    }
    margin-left: 60px;
    .el-timeline-item__content {
      position: relative;
      top: -26px;
      right: -25px;
      .el-card__body {
        padding: 0;
        color: #333333;
        .cardHead {
          background: #f7f8fc;
          padding: 10px 20px;
        }
        .cardMain {
          padding: 15px 20px;
          .pull-right {
            color: #ee816e;
            &:hover {
              text-decoration: underline;
              cursor: pointer;
            }
          }
        }
        .timeStamp {
          position: absolute;
          left: -156px;
          top: 17px;
        }
      }
    }
  }
  .iconCount {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 280px;
    }
  }
}
</style>
